<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>专栏</title>
  <script type="text/javascript" src="../js/main.js"></script>
  <script type="text/javascript" src="../js/vue.min.js"></script>
  <script type="text/javascript" src="../elementui/index.js"></script>
  <script type="text/javascript" src="../js/axios.min.js"></script>
  <link rel="stylesheet" type="text/css" href="../elementui/elementui.css"/>
  <link rel="stylesheet" type="text/css" href="../css/main.css">
  <link rel="stylesheet" type="text/css" href="../css/home.css">
</head>
<body>
<script>
  window.onload = function () {
    const vue = new Vue({
      el:'#app',
      data:{
        api:api,
        src:src,
        icon:{
          like:'../img/icon/like.svg',
          like_on:'../img/icon/like_on.svg',
          star:'../img/icon/star.svg',
          star_on:'../img/icon/star_on.svg'
        },
        user:{
          avatar:'',uid:'',username:''
        },
        nums: {
          viewNum: '',
          likeNum: '',
          starNum: '',
          likeStatus: false,
          starStatus: false,
        },
        subscribeList:[],
        subscribeStatus:false, /*关注*/
        article:{
          snowFlakeId:'',
          uid:'',
          avatar:'',
          viewNum:'',
          likeNum:'',
          starNum:'',
          createTime:'',
          title:'',
          content:'',
        },
        myComment:'',
        comment:{
          currentPage:1,
          totalPage:1,
          totalSize:0,
          size:15,
          list:[]
        }
      },
      methods:{
        currentChange(val){
          this.comment.currentPage = val;
          this.getComment();
        },
        addComment(){
          if (this.user.uid === '') {
            this.$message.warning('请先登录');
            return;
          }
          if (this.myComment.trim()===''){
            this.$message.warning('评论内容不能为空');
            return;
          }
          if (this.myComment.length>800){
            this.$message.warning('评论内容长度过长');
            return;
          }
          axios({
            url:api+'comment/addComment',
            method:'post',
            data:{
              objectType:'article',
              objectNo:this.article.snowFlakeId,
              content:this.myComment
            }
          }).then(res=>{
            console.log(res.data);
            if (res.data.result){
              this.comment.list = res.data.result;
              this.$message.success('发表评论成功');
              this.getComment();
            }else
              this.$message.warning(res.data.message);
          });
          //axios请求为异步操作，发送请求后清空评论
          this.myComment = '';
        },
        getComment(){
          axios({
            url:api+'comment/getComment',
            method:'post',
            data:{
              currentPage:this.comment.currentPage,
              size:this.comment.size,
              objectType:'article',
              objectNo:this.article.snowFlakeId,
            }
          }).then(res=>{
            console.log(res.data);
            if (res.data.result){
              this.comment.currentPage = res.data.currentPage;
              this.comment.totalPage = res.data.totalPage;
              this.comment.totalSize = res.data.totalSize;
              this.comment.list = res.data.data;
            }
          })
        },
        //获取作者用户信息
        getAutherInfo(){
          axios({
            url:api+'user/getUserInfoById',
            method:'get',
            params:{uid:this.article.uid}
          }).then(res=>{
            if (res.data.result){
              this.article.username = res.data.data.username;
              this.article.avatar = res.data.data.avatar;
            }
          })
        },
        //关注、取消关注
        async subscribe() {
          if (this.user.uid === '') {
            this.$message.warning('请先登录');
            return;
          }
          if (this.subscribeStatus) {
            let flag = await this.$confirm('是否取消关注?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(()=>{
              return true;
            }).catch(() => {
              return false;
            });
            if (!flag)
              return;
          }
          axios({
            url: api + 'user/subscribe',
            method: 'post',
            params: {
              uid: this.user.uid,
              flowerId: this.article.uid,
              status: !this.subscribeStatus
            }
          }).then(res => {
            if (res.data.result) {
              this.subscribeStatus = !this.subscribeStatus;
            }
          })
        },
        //获取关注列表
        getSubscribeList(){
          axios({
            url:api+'user/subscribe/getSubscribeList',
            method:'get',
            params:{uid:this.user.uid}
          }).then(res=>{
            if (res.data.result){
              this.subscribeList = res.data.data;
              this.subscribeStatus = this.subscribeList.indexOf(this.article.uid)!==-1;
            }
          })
        },
        like() {
          if (this.user.uid === '') {
            this.$message.warning('请先登录');
            return;
          }
          this.nums.likeStatus = !this.nums.likeStatus;
          if (this.nums.likeStatus)
            this.nums.likeNum = this.nums.likeNum + 1;
          else
            this.nums.likeNum = this.nums.likeNum - 1;
          axios({
            url: api + 'user/subscribe/like',
            method: 'post',
            params: {
              objectNo: this.article.snowFlakeId,
              objectType: 'article',
              status: this.nums.likeStatus
            }
          })
        },
        star() {
          if (this.user.uid === '') {
            this.$message.warning('请先登录');
            return;
          }
          this.nums.starStatus = !this.nums.starStatus;
          if (this.nums.starStatus)
            this.nums.starNum = this.nums.starNum + 1;
          else
            this.nums.starNum = this.nums.starNum - 1;
          axios({
            url: api + 'user/subscribe/star',
            method: 'post',
            params: {
              objectNo: this.article.snowFlakeId,
              objectType: 'article',
              status: this.nums.starStatus
            }
          })
        },
        //获取点赞、收藏数据
        getNums() {
          axios({
            url: api + 'user/subscribe/getNum',
            method: 'get',
            params: {
              objectNo: this.article.snowFlakeId,
              objectType: 'article'
            }
          }).then(res => {
            if (res.data.result) {
              console.log(res.data.data);
              this.nums = res.data.data;
            }
          })
        },
        //增加播放量
        addView() {
          if (this.article.snowFlakeId === '')
            return;
          window.setTimeout(function () {
            axios({
              url: api + 'user/subscribe/addView',
              method: 'post',
              params: {
                objectNo: vue.article.snowFlakeId,
                objectType: 'article'
              }
            })
          }, 10 * 1000);
        }
      },
      mounted(){
        let localUser = JSON.parse(localStorage.getItem("user"));
        if (localUser!=null)
          this.user = localUser;
        let article = JSON.parse(sessionStorage.getItem("article"));
        if (article!=null){
          this.article = article;
          this.getNums();
          this.getAutherInfo();
          this.getSubscribeList();
          this.addView();
          console.log(this.article);
        }
        this.getComment();
      }
    })
  };
</script>
<div id="app">
  <el-container>
    <div>
      <el-link style="float:left;margin-left: 15px" @click="window.location.href='/'" :underline="false">
        <h2>We Share</h2>
      </el-link>
    </div>
    <!--主容器-->
    <el-container>
      <el-card style="width: 900px;margin: 0 auto 45px auto;padding: 40px 80px 40px 80px">
        <h3>{{this.article.title}}</h3>
        <el-avatar :src="src+article.avatar" :key="src+article.avatar">user</el-avatar>
        <div style="display: inline-block;position: relative;top: -18px;left: 15px">
          <span style="color: hotpink">{{this.article.username}}</span>
          <div style="display: inline" v-show="user.uid!=article.uid">
            <el-button v-if="subscribeStatus" @click="subscribe" type="info" size="small" style="margin-left: 20px">已关注</el-button>
            <el-button v-else @click="subscribe" type="primary" size="small" style="margin-left: 20px">关注</el-button>
          </div>
        </div>
        <p>{{this.nums.viewNum}}浏览&nbsp;&nbsp;
          {{this.nums.likeNum}}点赞&nbsp;&nbsp;
          {{this.nums.starNum}}收藏&nbsp;&nbsp;
          {{this.article.createTime}}</p>
        <el-divider></el-divider>
        <div class="div-text">
          {{this.article.content}}
        </div>
        <el-divider></el-divider>
        <div class="video_num" style="margin-bottom: 25px">
          <a @click="like">
            <el-image :src="nums.likeStatus?icon.like_on:icon.like"></el-image>
          </a>
          <div class="text">{{nums.likeNum}}</div>
          <a @click="star">
            <el-image :src="nums.starStatus?icon.star_on:icon.star"></el-image>
          </a>
          <div class="text">{{nums.starNum}}</div>
        </div>
        <el-form :inline="true">
          <el-form-item>
            <el-avatar style="margin: 12px" :src="src+user.avatar">user</el-avatar>
          </el-form-item>
          <el-form-item>
            <el-input type="textarea" placeholder="发一条友善的评论" :autosize="{minRows: 2, maxRows: 10}"
                      v-model="myComment" style="width: 560px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addComment">发表评论</el-button>
          </el-form-item>
        </el-form>
        <el-divider></el-divider>
        <div v-for="comment in comment.list">
          <div style="position:absolute;display: inline-block;margin: 10px">
            <el-avatar :src="src+comment.avatar">user</el-avatar>
          </div>
          <div style="display: inline-block;margin-left: 80px;height: 100%;">
            <p style="color: hotpink">{{comment.username}}&nbsp;&nbsp;&nbsp;
              <span style="color: red">Lv{{comment.userLevel}}</span>
              <el-image style="width: 16px;height: 16px;margin-left:10px;position: relative;top: 3px"
                        v-show="article.uid==comment.uid" src="../img/icon/up.svg"></el-image>
            </p>
            <div class="div-text">{{comment.content}}</div>
            <p class="tip">{{comment.createTime}}</p>
          </div>
          <el-divider></el-divider>
        </div>
        <el-pagination
            background
            hide-on-single-page="true"
            :page-size="comment.size"
            :page-count="comment.totalPage"
            :current-page="comment.currentPage"
            @current-change="currentChange"
            layout="prev, pager, next"
            :total="comment.totalSize">
        </el-pagination>
      </el-card>
    </el-container>
    <!--主容器end-->
    <!--底栏容器-->
    <el-footer class="el-footer">
      <div class="footer">
        <div class="header"><p>weshare 视频文件共享交流平台</p></div>
        <div class="github">
          <a href="https://github.com/liuxianchun/weshare" target="_blank">
            <div class="github-but"></div>
          </a>
        </div>
        <div class="mod_help">
          <p>
            <el-link href="/view/home" :underline="false">首页</el-link>
            <span>|</span>
            <el-link href="https://github.com/liuxianchun" :underline="false">关于我们</el-link>
            <span>|</span>
            <el-link href="https://github.com/liuxianchun" :underline="false">联系我们</el-link>
          </p>
          <p class="coty">版权所有 &copy; 2012-2021</p>
        </div>
      </div>
    </el-footer>
    <!--底栏容器end-->
  </el-container>
</div>
</body>
</html>